<template>
    <div class="hospital-warrper">
        <el-card class="box-card">
            <div class="name">
                <div>
                    <b>床位编号</b>
                    <el-input class="w-50 m-2" placeholder="请输入床位号进行查询 床位编号: 例 1-101 1-102 A区1001.." v-model="data.searchData"
                        :prefix-icon="Search" />
                    <el-button type="primary" @click="searchDepartment" :icon="Search">查询</el-button>
                </div>
                <div class="delete-all">
                    <el-button style="width: 80px;" @click="batchDel">删除选中</el-button>
                </div>
            </div>
            <!-- 床位列表 -->
            <div class="list">
                <el-table :data="data.tableData" :border="true" style="width: 100%" @selection-change="getCheckIds">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="bednumber" label="床位编号" />
                    <el-table-column prop="department" label="所属科室" />
                    <el-table-column prop="nurse" label="责任护士" />
                    <!-- 医疗设备 -->
                    <el-table-column prop="breath" label="配备氧气罐">
                        <template #default="{ row }">
                            {{ row.breath === 0 ? 'x' : '√' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="heart" label="配备心电机">
                        <template #default="{ row }">
                            {{ row.breath === 0 ? 'x' : '√' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="breath" label="配备呼吸机">
                        <template #default="{ row }">
                            {{ row.breath === 0 ? 'x' : '√' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="icu" label="配备急救设备">
                        <template #default="{ row }">
                            {{ row.breath === 0 ? 'x' : '√' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="aircondition" label="空调地暖">
                        <template #default="{ row }">
                            {{ row.breath === 0 ? 'x' : '√' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="tv" label="电视外设">
                        <template #default="{ row }">
                            {{ row.breath === 0 ? 'x' : '√' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="科室操作">
                        <template #default="scope">
                            <el-button type="primary" :icon="Delete" link circle @click="openDelDialog(scope.row)" />
                            <el-button type="primary" :icon="Edit" link circle @click="openEditDialog(scope.row)" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页器 -->
            <el-pagination background v-model:current-page="data.pageinfo.page" v-model:page-size="data.pageinfo.size"
                :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="data.total" />
        </el-card>
        <!-- 删除 对话框 -->
        <el-dialog v-model="data.dialogVisible" title="系统提示" width="30%">
            <span><b>您删除床位，此操作不可逆，确定要删除吗？</b></span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="delBed">
                        确认删除
                    </el-button>
                    <el-button @click="data.dialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑功能 对话框 -->
        <el-dialog v-model="data.editDialog" title="编辑病床" width="30%">
            <el-form :inline="true" :model="data.bedInfo" class="demo-form-inline">
                <el-form-item label="床位编号">
                    <el-input v-model="data.bedInfo.bednumber" disabled/>
                </el-form-item><br>
                <el-form-item label="所属科室">
                    <el-select v-model="data.bedInfo.department" placeholder="请选择所属科室">
                        <el-option v-for="item in data.departmentInfo" :key="item.id" :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item><br>
                <el-form-item label="氧气罐">
                    <el-radio-group v-model="data.bedInfo.oxygen" @change="data.bedInfo.oxygen">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item><br>
                <el-form-item label="心电击">
                    <el-radio-group v-model="data.bedInfo.heart" @change="data.bedInfo.heart">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item><br>
                <el-form-item label="呼吸机">
                    <el-radio-group v-model="data.bedInfo.breath" @change="data.bedInfo.breath">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item><br>
                <el-form-item label="急救设备">
                    <el-radio-group v-model="data.bedInfo.icu" @change="data.bedInfo.icu">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item><br>
                <el-form-item label="空调地暖">
                    <el-radio-group v-model="data.bedInfo.aircondition" @change="data.bedInfo.aircondition">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item><br>
                <el-form-item label="电视外设">
                    <el-radio-group v-model="data.bedInfo.tv" @change="data.bedInfo.tv">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item><br>
                <el-form-item label="责任护士">
                    <el-select v-model="data.bedInfo.nurse" placeholder="请选择责任护士">
                        <el-option v-for="item in data.departmentNurse" :key="item.id" :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item><br>
                <el-form-item>
                    <el-button type="primary" @click="editBed">确认编辑</el-button>
                    <el-button @click="data.editDialog = false">取消编辑</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { Search, Edit, Delete } from '@element-plus/icons-vue'
import { getBedlistReq, delBedReq, editBedReq,searchBedReq,batchdelBedReq } from '@/api/bedmanage/bedmanage'
import { watchEffect, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { el } from 'element-plus/es/locale';

//定义数据
const data = reactive({
    //每一页的数据
    pageinfo: {
        page: 1,
        size: 10
    },
    //表格数据
    tableData: [],
    //编辑数据
    departmentInfo: [],
    departmentName: '',
    departmentBedNum: null,
    departmentNurse: [],
    bedInfo: {
        //床位编号: 例 1-101 1-102 A区1001..
        bednumber: '',
        //所属科室
        department: '',
        //配备氧气罐0否 1是
        oxygen: null,
        //配备心电机0否 1是
        heart: null,
        //配备呼吸机0否 1是
        breath: null,
        //配备急救设备0否 1是
        icu: null,
        //配备空调地暖0否 1是
        aircondition: null,
        //配备电视外设0否 1是
        tv: null,
        //责任护士
        nurse: ''
    },
    //编辑功能对话框显隐
    editDialog: false,
    //控制删除对话框显隐
    dialogVisible: false,
    //删除单个科室
    bedId: null,
    //搜索数据
    searchData: null,
    //删除选中项
    checkIds: [],
    //总数据
    total: null
})

//获取病床列表
const getList = async () => {
    const res = await getBedlistReq(data.pageinfo)
    data.tableData = res.data.data
    data.total = res.data.total
}

//删除单个病床
const openDelDialog = (row) => {
    data.bedId = row.id
    console.log(row.id);
    data.dialogVisible = true
}

const delBed = async () => {
    const res = await delBedReq({ id: data.bedId })
    data.dialogVisible = false
    if (res.data.code === 1) {
        ElMessage({
            message: '数据删除成功',
            type: 'success'
        })
    } else {
        ElMessage.error('数据删除失败')
    }
    getList()
}

//编辑单个病床
const openEditDialog = (row) => {
    data.editDialog = true
    data.bedInfo = row
}

const editBed = async () => {
    const res = await editBedReq(data.bedInfo)
    data.editDialog = false
    if (res.data.code === 1) {
        ElMessage({
            message: '床位数据修改成功',
            type: 'success'
        })
    } else {
        ElMessage.error('床位数据修改失败')
    }
    getList()
}

//查询功能
const searchDepartment = async () => {
    const res = await searchBedReq({ page: data.pageinfo.page, size: data.pageinfo.size, bednumber: data.searchData })
    if (res.data.code === 1) {
        ElMessage.success('查询成功')
    } else {
        ElMessage.error('查询失败')
    }
    data.tableData = res.data.data
    console.log(res);
}

//批量删除

let checkIds =[]

const getCheckIds = (val) => {
    checkIds =[]
    if(val){
        val.forEach(item => {
            checkIds.push(item.id)
        })
    }
}

const batchDel = async () => {
    const res = await batchdelBedReq({ids:`${JSON.stringify(checkIds)}`})
    if (res.data.code === 1) {
        ElMessage.success('批量删除成功')
    } else {
        ElMessage.error('批量删除失败')
    }
    getList()
    console.log(res);
}
watchEffect(getList)
</script>

<style scoped lang="scss">
.hospital-warrper {
    .name {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        margin-left: 20px;

        .el-input {
            margin-left: 20px;
            width: 300px;
        }

        .el-button {
            margin-left: 20px;
        }
    }

    .list {
        margin-top: 40px;
        margin-left: 20px;

        .el-table__header-wrapper {
            --el-table-th-bg-color: var(#f2f6fc)
        }

        .el-button--primary {
            margin-left: 0;
        }
    }

    .el-pagination {
        margin-top: 20px;
        margin-left: 20px;
    }
}
</style>